<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>用户列表统计</title>

	<link rel="stylesheet" href="../assets/font-awesome/4.5.0/css/font-awesome.min.css" />
	<link rel="stylesheet" href="../assets/css/jquery-ui.min.css" />
	<link rel="stylesheet" href="../assets/css/components.css">
	<link rel="stylesheet" href="../assets/css/bootstrap.min.css">
	<link rel="stylesheet" href="../assets/css/uniform.default.css">
	<link rel="stylesheet" href="../assets/css/bootstrap-switch.min.css">
	<link rel="stylesheet" href="../assets/css/layout.css">
	<link rel="stylesheet" href="../assets/css/plugins.css">
	<link rel="stylesheet" href="../assets/css/darkblue.css">
	<link rel="stylesheet" href="../assets/css/custom.css">

</head>

<body>
	<div>
		<div class="col-md-12">
			<!-- BEGIN CHART PORTLET-->
			<div class="portlet light bordered">
				<div class="portlet-title">
					<div class="caption">
						<i class="icon-bar-chart font-green-haze"></i>
						<span class="caption-subject bold uppercase font-green-haze"> Bar Charts</span>
						<span class="caption-helper">column and line mix</span>
					</div>
				</div>
				<div class="portlet-body">
					<div id="chart" style="height: 800px;">
					</div>
				</div>
			</div>
			<!-- END CHART PORTLET-->
		</div>
	</div>


	<script src="../assets/js/jquery-2.1.4.min.js"></script>
	<script src="../assets/js/jquery-migrate.min.js"></script>
	<script src="../assets/js/jquery-ui.min.js"></script>
	<script src="../assets/js/bootstrap.min.js"></script>
	<script src="../assets/js/jquery.slimscroll.min.js"></script>
	<script src="../assets/js/bootstrap-datepicker.min.js"></script>
	<script src="../assets/js/ace-elements.min.js"></script>
	<script src="../assets/js/ace.min.js"></script>
	<script src="../assets/js/jquery.uniform.min.js"></script>

	<script src="../assets/js/echarts.min.js"></script>

	<script>
		let userObj = JSON.parse(sessionStorage.getItem('userObj'))
		let list = userObj.userList;
		let group = new Array(3000).fill(0)
		for (let i of list) {
			group[i.leaderID]++
		}
		let groupNumber = []
		let groupPeople = []
		for (let i = 0; i < group.length; i++) {
			if (group[i]) {
				groupNumber.push('第' + i + '组')
				groupPeople.push(group[i] + 1)
			}
		}
		if (sessionStorage.getItem('user_role') === '管理员') {
			groupNumber[0] = '组长人数'
			groupPeople[0]--
		}else if(sessionStorage.getItem('user_role')==='组长'){
			groupNumber[0] = '当前小组组员人数'
			groupPeople[0]--
		}
		var chartDom = document.getElementById('chart')
		var myChart = echarts.init(chartDom)
		var options = {
			title: {
				text: '小组人数列表',
				left: 'center',
				top: 'top',
				textStyle: {
					fontSize: 32,
					color: "rgba(141, 99, 214, 0.72)"
				},
			},
			color: ["#3398DB", "#2C7659"],

			xAxis: {
				name: '组号',
				type: 'category',
				data: groupNumber,
				nameTextStyle: {
					fontSize: 24
				}
			},
			yAxis: {
				name: "小组人数",
				type: 'value',
				nameTextStyle: {
					fontSize: 24
				},
				max: 50
			},
			series: [{
				name: "小组人数",
				label: {
					show: true,
					position: 'top',
					fontSize: 20
				},
				data: groupPeople,
				type: 'bar'
			}]
		}
		options && myChart.setOption(options)
	</script>
</body>

</html>